<template>
    <div>
        <div class='warning_warp border'>
            <div class="table_wrap" style="height: 700px;overflow-y: scroll;">
                <div style="position: relative;">
                    <el-button  class="warn_autorecord" type="primary" @click="changeRecover('all',0)" size="small"> 一键刷新</el-button>
                    <el-button  class="warn_state" type="primary" @click="changeState('all',2)" size="small"> 一键忽略</el-button>
                    <el-button  class="warn_stop" type="primary" @click="changeDisable('all')" size="small"> 一键停用</el-button>
                    <i @click="tishi" class=" set_fitem_tishi_icon el-icon-question"></i>
                </div>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-style="getRowClass" 
                        :cell-style="getRowClass"
                        :header-row-style="getRowClass" 
                        :header-cell-style="getHeaderClass"
                       >
                    <el-table-column
                            prop="devname"
                            label="设备名称"
                            width="">
                    </el-table-column>
                    <el-table-column
                            prop="idname"
                            label="单项名称"
                            width="">
                    </el-table-column>
                    <el-table-column
                            prop="errorinfo"
                            label="报警信息"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="时间"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="alarmvalue"
                            label="报警值"
                            header-align="center"
                            align="center"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="ahhvalue"
                            label="高高限"
                            header-align="center"
                            align="center"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="allvalue"
                            label="低低限"
                            header-align="center"
                            align="center"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="alarmlimit"
                            label="报警级别"
                            header-align="center"
                            align="center"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="alarmstate"
                            label="状态"
                            header-align="center"
                            align="center"
                            width="150">
                        <template slot-scope="scope">
                            <span v-if="scope.row.alarmstate == 1">正在报警</span>
                            <span v-if="scope.row.alarmstate == 2">已忽略</span>
                            <span v-if="scope.row.alarmstate == 3">已停用</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="autorecover"
                            label=""
                            align="center"
                            width="150">
                        <template slot-scope="scope">
                            <el-button
                                    type="primary" size="small"
                                    @click="changeRecover(scope.row,0)"
                                    :disabled="scope.row.autorecover == 1"
                                    >
                                    手动刷新
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="" width="250" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    type="primary"
                                    @click="changeState(scope.row,2)"
                                    :disabled = "scope.row.alarmstate!=1">忽略</el-button>
                            <el-button style="margin-left: 30px;"
                                    type="info"
                                    v-if="scope.row.alarmstate != 3"
                                    @click="changeDisable(scope.row,0)">停用</el-button>
                            <el-button style="margin-left: 30px;"
                                    type="info"
                                    v-if="scope.row.alarmstate == 3"
                                    @click="changeDisable(scope.row,1)">启用</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData:[],
                data: null,
                errorI:[],
                listWarning:[],
                timeGetData:null,
                activeNames: ['1','2','3'],
            }
        },
        created(){
            this.getWarningList()
            this.$nextTick(() => {
                this.timeGetData = setInterval(() => {
                    this.getWarningList()
                }, 1500); 
            })
        },
        methods: {
            getRowClass(row){
                if(row.rowIndex%2 == 0){
                    return `background:none ;
                    border:none;
                    border-bottom:1px solid #ebeef53d;
                    `;
                }else{
                    
                    return `background:rgba(75, 99, 120, 0.1) ;
                    border:none;
                    border-bottom:1px solid #ebeef53d;
                    `;
                }
            },
            getHeaderClass(){
                return `background:none ;
                    border:none ;
                    `;
            },
            // 获取当前报警
            getWarningList(){
                this.$http.post(this.$baseUrl,{
                "geterror":"",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }).then((res)=>{
                    if(res.data.result == 'ok'){
                        var data = res.data.geterror
                        var arr = []
                        for(var i = 0; i < data.length; i++){
                            var str = {
                                    type:data[i].type,//设备类型
                                    uid: data[i].uid, //设备编号
                                    devname: data[i].devname,//设备名称
                                    addr:data[i].addr,//设备地址
                                    idname: data[i].idname,//设备子项名称  无意义
                                    id:data[i].id,//设备子项id  无意义
                                    alarmstate:data[i].alarmstate, //报警状态 1正在报警 2已忽略 3已停用
                                    time: this.formatDate(data[i].time* 1000, 'YYYY-MM-DD H:m:s'), //报警时间
                                    errorinfo:data[i].errorinfo,// 报警内容描述
                                    alarmvalue: data[i].id == -1 ? '':data[i].alarmvalue+' '+data[i].flag,//报警值
                                    ahhvalue: data[i].id == -1 ? '':data[i].ahhvalue == undefined ? '':data[i].ahhvalue,//高高限
                                    allvalue: data[i].id == -1 ? '':data[i].allvalue == undefined ? '':data[i].allvalue,//低低限
                                    autorecover:data[i].autorecover,//是否打开了报警保持 0打开了 1没有打开
                                    alarmlimit: data[i].id < 0 ? '' : data[i].alarmlimit,//报警等级
                            }
                            arr.push(str)
                        }
                        this.tableData = arr
                    }else if(res.data.result =='No access rights.'){
                    }
                })
            },
            // 刷新下发 0 刷新
            changeRecover(data,value){
                var params = {
                    "seterror":[],
                    "autorecover":value,//手动恢复报警，报警将会手动恢复，不影响报警自动恢复的设置。
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                if(data == 'all'){  //一键停用
                    this.$confirm('此操作将一刷新所有报警设备, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var arr = {
                            "uid":'all'
                        }
                        params.seterror.push(arr)
                        this.$http.post(this.$baseUrl, params).then((res) => {
                            if(res.data.result == 'ok'){
                                this.$notify({
                                    title: '刷新成功',
                                    type: 'success',
                                    duration: 1500
                                });
                            }else{
                                this.$notify({
                                    title: '操作失败',
                                    type: 'warning',
                                    duration: 1500
                                });
                            }
                        })
                    }).catch(() => {
                        this.$notify({
                            title: '已取消',
                            type: 'warning',
                            duration: 1500
                        });      
                        return false  
                    });
                }else{
                    if(data.id == -1){
                        var arr = {
                            "uid":data.uid,
                        }
                        params.seterror.push(arr)
                    }else{
                        var arr = {
                            "uid":data.uid,
                            "id":data.id,//没有这个编号，表示设置设备离线状态，有这个编号表示设置单元项信息。
                        }
                        params.seterror.push(arr)
                    }
                    this.$http.post(this.$baseUrl, params).then((res) => {
                        if(res.data.result == 'ok'){
                            this.$notify({
                                title: '刷新成功',
                                type: 'success',
                                duration: 1500
                            });
                        }else{
                            this.$notify({
                                title: '操作失败',
                                type: 'warning',
                                duration: 1500
                            });
                        }
                    })
                }
                    
                
            },
            // 忽略下发  2忽略
            changeState(data,value){
                var params = {
                    "seterror":[],
                    "state":value,
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                if(data == 'all'){  //一键忽略
                    var arr = {
                        "uid":'all'
                    }
                    params.seterror.push(arr)
                    this.$confirm('此操作将一键忽略所有报警设备, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.post(this.$baseUrl, params).then((res) => {
                            if(res.data.result == 'ok'){
                                if(value == 2){
                                    this.$notify({
                                        title: '已忽略',
                                        type: 'success',
                                        duration: 1500
                                    });
                                }
                            }else{
                                this.$notify({
                                    title: '操作失败',
                                    type: 'warning',
                                    duration: 1500
                                });
                            }
                        })
                    }).catch(() => {
                        this.$notify({
                            title: '已取消',
                            type: 'warning',
                            duration: 1500
                        });      
                        return false  
                    });
                }else{ //单个忽略
                    if(data.id == -1){ //设备离线
                        var arr = {
                            "uid":data.uid,                    
                        }
                        params.seterror.push(arr)
                    }else{//设备子项报警
                        var arr = {
                            "uid":data.uid,
                            "id":data.id,//没有这个编号，表示设置设备离线状态，有这个编号表示设置单元项信息。
                        }
                        params.seterror.push(arr)
                    }
                    this.$http.post(this.$baseUrl, params).then((res) => {
                        if(res.data.result == 'ok'){
                            if(value == 2){
                                this.$notify({
                                    title: '已忽略',
                                    type: 'success',
                                    duration: 1500
                                });
                            }
                        }else{
                            this.$notify({
                                title: '操作失败',
                                type: 'warning',
                                duration: 1500
                            });
                        }
                    })
                }
            },
            // 停用下发 0停用 1启用  data表示单个数据或者all全部
            changeDisable(data){
                var params = {
                    "seterror":[],
                    "disable":0,
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                if(data == 'all'){  //一键停用
                    var arr = {
                        "uid":'all'
                    }
                    params.seterror.push(arr)
                    this.$confirm('此操作将一键停用所有报警设备, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.post(this.$baseUrl, params).then((res) => {
                            if(res.data.result == 'ok'){
                                    this.$notify({
                                        title: '已停用',
                                        type: 'success',
                                        duration: 1500
                                    });
                            }else{
                                this.$notify({
                                    title: '操作失败',
                                    type: 'warning',
                                    duration: 1500
                                });
                            }
                        })
                    }).catch(() => {
                        this.$notify({
                            title: '已取消',
                            type: 'warning',
                            duration: 1500
                        });      
                        return false  
                    });
                }else{ //单个停用
                    if(data.id == -1){ //设备离线
                        var arr = {
                            "uid":data.uid,                    
                        }
                        params.seterror.push(arr)
                    }else{//设备子项报警
                        var arr = {
                            "uid":data.uid,
                            "id":data.id,//没有这个编号，表示设置设备离线状态，有这个编号表示设置单元项信息。
                        }
                        params.seterror.push(arr)
                    }
                    this.$http.post(this.$baseUrl, params).then((res) => {
                        if(res.data.result == 'ok'){
                            this.$notify({
                                title: '已停用',
                                type: 'success',
                                duration: 1500
                            });
                            
                        }else{
                            this.$notify({
                                title: '操作失败',
                                type: 'warning',
                                duration: 1500
                            });
                        }
                    })
                }
                
            },
            tishi(){
                this.$alert('<strong>停用：</strong><span>该项报警不再报警提示，并且不显示在报警列表内。</span></br><span style="margin-left:25px">恢复方法：1、可重启主机恢复停用状态； 2、通过系统操作：【停用设备】可在设备配置中重新启用该设备的使能开关；【停用单项】可在设备概览页点击设置，重新启用该项的报警开关。</span></br><p style="margin-top:15px"><strong>忽略：</strong><span>该项报警不再报警提示，但显示在报警列表内，可直接在报警列表启用。</span></p><p style="margin-top:15px"><strong>手动刷新：</strong><span>在设备概览设置中，开启了报警保持开关，则报警触发后需要在此点手动刷新，才可以刷新成当前真实状态</span></p>', {
                    iconClass: 'el-icon-warning-outline',
                    showConfirmButton:false,
                    customClass:'messtishi',
                    dangerouslyUseHTMLString: true
                });
            },
        },
         // 清除定时器
        beforeDestroy() {
            // 停止循环接口
            clearInterval(this.timeGetData);
            this.timeGetData = null;
        }
    }
</script>

<style scoped>
   /* 表格背景 */
   /deep/ .el-table, .el-table__expanded-cell{
        background: none !important;
    }
    /deep/ .el-table tr{
        background-color: #48698745 !important;
    }
    /deep/ .el-table thead{
        color: #fff !important;
    }
    /deep/ .el-table{
        color: #fff !important;
    }
    /deep/ .el-table th, .el-table tr {
        background-color: #ffffff2b !important;
    }
    .table_wrap{
        height: 700px;
        overflow-y: scroll;
    }
    /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #1515152e !important;
    }
    /deep/ .el-table tr th.is-leaf{
        border: none;
    }
    /deep/ .el-table--border{
        border: none;
    }
     /* 清除底部横线 */
    .el-table::before {
        height: 0px;
    }
    .el-table--border::after{
        display: none;
    }
    /* 按钮 */
    /deep/ .table_wrap .el-button.is-disabled{
        background: #656e75cc;
    }
    /deep/ .table_wrap .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
        background: #656e75cc;
        color: #fff;
    }
    /deep/ .table_wrap .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
        background: #656e75cc;
        color: #fff;
    }
    /deep/ .table_wrap  .el-button{
        background: rgba(89, 129, 165, 0.8);
        border: none;
    }
    /* 弹框 */
    /deep/ .el-dialog {
    background: rgba(79, 112, 151, 0.4) !important;
    }
    /deep/ .el-dialog__header {
    background: rgba(0, 0, 0, 0.2);
    color: #fff !important;
    }
    /deep/ .el-dialog__header .el-dialog__title {
    color: #fff !important;
    }
    /deep/ .el-form-item__label {
    color: #fff !important;
    }
    /deep/ .el-table__expand-icon{
        color: #fff !important;
    }

    .errortishi{
        color:#fff;
        line-height: 30px;
    }
    .errorts_p2{
        color: #e6a23c;
        font-size: 18px;
        margin-top: 20px;
    }
    .errorts_span{
        border-bottom: 1px solid #fff;
    }
    .warn_autorecord{
        position: absolute;
        right: 287px;
        top: 9px;
        z-index: 2;
        background-color: #63809aad;
        border: 1px solid #9baebfad;
    }
    .warn_state{
        position: absolute;
        right: 138px;
        top: 9px;
        z-index: 2;
        background-color: #63809aad;
        border: 1px solid #9baebfad;
    }
    .warning_state_false{
        background-color: #63809a00;
        border: 1px solid #9baebf00;
        cursor: auto;
    }
    .warn_stop{
        position: absolute;
        right: 36px;
        top: 9px;
        z-index: 2;
        background-color: #63809aad;
        border: 1px solid #9baebfad;
    }
    /* 提示 */
    .set_fitem_tishi_icon{
        font-size: 20px;
        position: absolute;
        right: 10px;
        top: 14px;
        z-index: 2;
        cursor: pointer;
        color: #ccc;
    }
</style>
